<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片廊</title>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			background-color: #D2E9FF;
			height: 100%;
		}
		.container{
			width: 860px;
			height: 860px;
			background-color:  #FFD9EC;
			margin: 0 auto;
		}
		h1{
			color: lightblue;
			font-size:50px;
			font-weight: 500;
			text-align: center;
		}
		
		.box{
			float: left;
			width: 200px;
			height: 230px;
			margin-left: 20px;
			background-color: white;
			position: relative;
			margin-bottom: 20px;
		}
		img{
			width: 190px;
			height: 190px;
			border: 5px solid white;
		}
		.pic-wrap .box:nth-child(4n+1){
			margin-left: 0;
		}
		.box2{
			width: 190px;
			height: 25px;
			background-color: rgba(0,0,0,0.4);
			position: absolute;
			bottom: 35px;
			left: 5px;
			text-align: center;
			display: none;
		}
		.box:hover{
			box-shadow: 0 5px 5px #ccc;
			margin-top:-5px;
		}
		.box:hover .box2{
			display: block;

	</style>
</head>
<body>
	<div class="container">
		<h1>喵&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp屋</h1>
		<div class="pic-wrap">
			<div class="box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"><br/>
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp阿喵
				<div class="box2">喵喵喵</div>
			</div>
			<div class="box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"><br/>
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp阿前
				<div class="box2">喵喵喵</div>
			</div>
			<div class="box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"><br/>
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp一棵葡萄树
				<div class="box2">喵喵喵</div>
			</div>
			<div class="box">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"><br/>
				&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp阿嫩
				<div class="box2">喵喵喵</div>
			</div>
			
		</div>
	</div>
</body>
</html>